Skip to content

feat: condense answer-page library matches and polish answer chrome#487

Merged
BigSimmo merged 4 commits into
mainfrom
claude/answer-page-design-polish-ffd5a6
Jul 11, 2026
Merged

feat: condense answer-page library matches and polish answer chrome#487
BigSimmo merged 4 commits into
mainfrom
claude/answer-page-design-polish-ffd5a6

Conversation

@BigSimmo

Copy link
Copy Markdown
Owner

Summary

  • Condense the answer page's "Also in your library" cards into compact single-row items (icon, title-as-link, rounded mode badge, icon-only search action) in a wrapping rail — no horizontal scroll, no clipped cards on desktop; subtitle dropped and the decorative extra badge hidden below sm so titles keep room on phones.
  • Unify the sources capsule to a single rounded-full Sources pill with a count badge in every state ("Review nearby sources" / "Review sources" labels removed); grounding caveats remain on the Source-only pill and the "Review source match" banner.
  • Restyle the Source-only disclosure as a rounded amber pill that expands into a soft detail panel (boxy left-border cut edge removed).
  • "Try next" follow-ups: eyebrow label above larger wrap-safe chips on the answer thread; the stacked layout stretches children so chips wrap at the column edge instead of overflowing (mobile composer scroll row unchanged).
  • Tighten the answer support card (56px rows, rounded Review tag, rebalanced banner icon).
  • Test update: tests/ui-smoke.spec.ts rail assertion now checks the wrap layout instead of overflow-x-auto.

Note: this branch (like ~15 sibling claude/* branches) carries the shared ancestor commit 648abfa3f ("docs: align readiness runtime version", ±2 lines in docs/production-readiness-checklist.md) that never landed on main; it is included in this PR's diff.

Verification

  • npm run verify:pr-local — not run as a unit: its format:check step fails locally on two files (CLAUDE.md, .claude/settings.json) that are byte-identical to green main (Windows CRLF checkout artifact), and its conditional next build is unsafe beside the live dev server on this machine. The component gates were run individually instead (below).
  • npm run verify:ui when UI, routing, styling, browser behavior, reduced-motion, or forced-colors behavior changed — run twice (pre-merge and post-merge with main). Post-merge: 128 passed, 2 failed (ui-smoke.spec.ts:1891 routed-differential race, ui-tools.spec.ts:489 hero sizing); both failures reproduce byte-identically with this PR's files reverted to origin/main in the same environment, so they are main-side/local-env, not from this diff. Pre-merge run: 124/124 after warm re-runs of two dev-server cold-compile timeouts.
  • npm run verify:cheap — green on the merged tree (lint, typecheck, 1489 vitest tests, runtime/sitemap/type-scale checks). npm run format:check green for all 10 files this PR touches (repo-wide run flags only the two pre-existing CRLF-artifact files identical to main).
  • npm run verify:release — not run (not a release).
  • npm run eval:retrieval:quality — not run: no retrieval, ranking, selection, chunking, or scoring behavior changed (presentation-only diff).
  • npm run eval:rag -- --limit 15 — not run: answer generation, synthesis prompt, and post-processing unchanged.
  • npm run check:production-readiness — run because source rendering (presentation) changed. Result: code-level checks pass; the 2 FAIL lines are missing NEXT_PUBLIC_SUPABASE_URL / SUPABASE_SERVICE_ROLE_KEY / OPENAI_API_KEY env in this secretless worktree, which the repo docs classify as expected demo-mode behaviour, not a regression.
  • npm run check:deployment-readiness — not run: no deployment/startup behavior changed.

Additional evidence: targeted Playwright (cross-mode quick links, source-only) green; visual QA via headless Chromium at 1280px and 390px including a forced source-only state; horizontal overflow measured 0px on both viewports.

Clinical Governance Preflight

Completed because the change touches source rendering (presentation only — no retrieval, generation, access, or data-path changes).

  • Source-backed claims still require linked source verification before clinical use — the verify-first caveat moved from the capsule label into the always-visible Source-only pill + "Review source match" banner; the sources popover/sheet behaviour is unchanged.
  • No patient-identifiable document workflow was introduced or expanded without explicit governance approval — none touched.
  • Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy) — no env/config changes.
  • Service-role keys and private document access remain server-only — no key or access-path changes.
  • Demo/synthetic content remains clearly separated from real clinical sources — unchanged.
  • Source metadata, review status, and outdated/unknown-source behavior remain conservative — status dots, review banners, and Source-only disclosure retained; only their visual styling changed.
  • Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed — no decision-support behavior changed (labels/layout only).

Notes

  • User-confirmed design decisions: capsule label is always "Sources" (+count), and library-card subtitles are dropped entirely.
  • ClinicalDashboard.tsx is touched (5 lines: removal of now-unused weakEvidence/grounded props at one call site).

🤖 Generated with Claude Code

BigSimmo and others added 3 commits July 10, 2026 21:54
- Cross-mode "Also in your library" cards become compact single-row
  items in a wrapping rail (no horizontal scroll, no clipped cards);
  subtitle dropped, search action is an icon button, decorative badge
  hidden below sm so titles keep room
- Sources capsule unified to a single rounded "Sources" pill with count
  badge in every state; grounding caveats stay on the Source-only pill
  and Review banner
- Source-only disclosure restyled as a rounded amber pill that expands
  into a soft panel
- "Try next" follow-ups get an eyebrow label above larger wrap-safe
  chips (stacked layout stretches so chips wrap at the column edge)
- Answer support card rows tightened; Review tag rounded

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabase Bot commented Jul 11, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c268d8b7-9b4b-4b69-970b-d64848c53cb7

📥 Commits

Reviewing files that changed from the base of the PR and between b2c7726 and 997a6ce.

📒 Files selected for processing (4)
  • docs/branch-review-ledger.md
  • src/components/ClinicalDashboard.tsx
  • src/components/clinical-dashboard/cross-mode-links.tsx
  • tests/ui-smoke.spec.ts
💤 Files with no reviewable changes (1)
  • src/components/clinical-dashboard/cross-mode-links.tsx
✅ Files skipped from review due to trivial changes (1)
  • docs/branch-review-ledger.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/ClinicalDashboard.tsx

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added stacked answer follow-up suggestions with eyebrow-style labels displayed above chips when using the wrap layout.
    • Updated cross-mode links layout to wrap responsively with a more compact card presentation.
  • Improvements

    • Simplified source capsule labeling to rely on source counts.
    • Improved chip, priority, and source-only disclosure spacing/sizing; refined styling for source capsule and badges.
    • Added conditional “Review source match” messaging when source review is needed.
  • Tests

    • Updated UI smoke assertions for the new cross-mode links responsive behavior and added coverage for the source review prompt.

Walkthrough

The changes simplify source labeling, add source-review notices for prior answers, add stacked follow-up chip layouts, convert cross-mode links to a wrapping layout, and refine evidence-panel and source-capsule styling.

Changes

Clinical dashboard presentation

Layer / File(s) Summary
Source labeling and answer review states
src/components/ClinicalDashboard.tsx, src/components/clinical-dashboard/answer-content.tsx, src/components/clinical-dashboard/answer-result-surface.tsx, src/components/ui-primitives.tsx, tests/ui-smoke.spec.ts, docs/branch-review-ledger.md
Source capsule labels now depend only on sourceCount; evidence and grounding props were removed from NaturalLanguageAnswer, prior answers can display a source-match review warning, source-only disclosure styling was adjusted, and smoke coverage plus the review ledger were updated.
Follow-up chip label layouts
src/components/clinical-dashboard/answer-suggestion-chips.tsx, src/components/clinical-dashboard/answer-follow-up-suggestions.tsx, src/app/globals.css
Suggestion chips support inline or above-label placement, with stacked rows, eyebrow labels, and updated chip dimensions and typography.
Cross-mode link layout
src/components/clinical-dashboard/cross-mode-links.tsx, tests/ui-smoke.spec.ts
Cross-mode cards inline reference and search actions, while the link rail now wraps instead of using horizontal scrolling; the smoke assertion reflects the new class.
Evidence panel presentation
src/components/clinical-dashboard/evidence-panels.tsx
Priority rows use shorter controls, smaller icons, and explicitly styled source labels.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 10 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 12.50% which is insufficient. The required threshold is 70.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (10 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main UI change set: condensing answer-page library matches and polishing answer chrome.
Description check ✅ Passed The description matches the required template with Summary, Verification, Clinical Governance Preflight, and Notes sections filled.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Generated And Sensitive Files ✅ Passed Changed files are only docs/source/tests; no .env, cache, build, browser, db, or key files were added, and secret scan found only benign .env.local references.
Verification Claims ✅ Passed Verification statements are explicit: the PR description names commands and results/reasons (verify:ui, verify:cheap, check:production-readiness, verify:pr-local).
Risky Git Or Deployment Actions ✅ Passed No touched file adds force-push/reset/clean/rebase/deploy guidance; the only edited doc is a safe review-lookup ledger.
Supabase Project And Schema Safety ✅ Passed UI/docs-only diff; no Supabase project-ref, schema, migration, RLS, or policy changes appear in the touched files.
Runtime And Package Manager Integrity ✅ Passed PASS: The PR doesn’t modify package manager/runtime files or scripts; the repo stays pinned to npm@11.17.0, Node 24.x, and engine-strict=true.
Api Route Failure Handling ✅ Passed Diff only touches UI components, styles, tests, and docs; no API route, server action, RAG, search, ingestion, or provider integration logic changed.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/answer-page-design-polish-ffd5a6
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch claude/answer-page-design-polish-ffd5a6

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b2c7726061

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/components/clinical-dashboard/answer-content.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/components/clinical-dashboard/evidence-panels.tsx (1)

236-238: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Minor: sourceLabel pill diverges from subtleStatusPill used elsewhere in the same card.

Line 209 in this same component still uses subtleStatusPill for the safety-count badge, while priority.sourceLabel now hand-rolls an equivalent pill (rounded-full border ... bg-[color:var(--surface-wash)] ...). Not a functional problem, but two near-identical pill styles now coexist in the same file.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/clinical-dashboard/evidence-panels.tsx` around lines 236 -
238, Replace the hand-rolled class list on the priority.sourceLabel span with
the existing subtleStatusPill style used by the safety-count badge in the same
component, removing the duplicate pill styling while preserving the displayed
label.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/clinical-dashboard/cross-mode-links.tsx`:
- Around line 65-76: The search button currently records the open telemetry
event before invoking onModeSearch. Remove logCrossModeLinkOpen from this button
handler, and if tracking is required, add or use a dedicated search telemetry
function rather than the open event.

---

Nitpick comments:
In `@src/components/clinical-dashboard/evidence-panels.tsx`:
- Around line 236-238: Replace the hand-rolled class list on the
priority.sourceLabel span with the existing subtleStatusPill style used by the
safety-count badge in the same component, removing the duplicate pill styling
while preserving the displayed label.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c227f08-3c8b-4a32-99b3-58ed9995a40a

📥 Commits

Reviewing files that changed from the base of the PR and between dd7012c and b2c7726.

📒 Files selected for processing (10)
  • src/app/globals.css
  • src/components/ClinicalDashboard.tsx
  • src/components/clinical-dashboard/answer-content.tsx
  • src/components/clinical-dashboard/answer-follow-up-suggestions.tsx
  • src/components/clinical-dashboard/answer-result-surface.tsx
  • src/components/clinical-dashboard/answer-suggestion-chips.tsx
  • src/components/clinical-dashboard/cross-mode-links.tsx
  • src/components/clinical-dashboard/evidence-panels.tsx
  • src/components/ui-primitives.tsx
  • tests/ui-smoke.spec.ts
💤 Files with no reviewable changes (2)
  • src/components/clinical-dashboard/answer-result-surface.tsx
  • src/components/ClinicalDashboard.tsx

Comment thread src/components/clinical-dashboard/cross-mode-links.tsx
@BigSimmo
BigSimmo enabled auto-merge (squash) July 11, 2026 07:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant